import { Button } from '@/library/gallery/components/Button'
import Dialog from '@/library/gallery/components/Dialog'
import Toast from '@/library/gallery/components/Toast'
import { DemoBlock } from '@/library/widgets/DemoBlock'

export default (): React.ReactElement => (
  <>
    <DemoBlock title="基本用法">
      <Button
        block
        pattern="primary"
        onClick={() => Dialog.confirm({
          disabledCancle: true,
          onConfirm: () => console.info('点击确认'),
          title: '提示',
          content: 'Exercitation eu magna est ex nulla sint culpa quis nulla velit officia laborum mollit. Cillum enim sit deserunt minim esse in ex velit cupidatat consectetur sit deserunt do commodo cillum. Reprehenderit sunt dolore amet minim nisi occaecat excepteur consectetur. Cillum in tempor elit deserunt labore reprehenderit deserunt excepteur voluptate nostrud. Nisi magna id consequat veniam consectetur. Aute ipsum et sunt do consequat cillum consectetur mollit aute ipsum minim fugiat. Sunt deserunt ipsum consequat non eiusmod anim nulla. Irure laborum reprehenderit laborum est est ea non laboris laborum sunt dolor excepteur mollit sint. Ullamco veniam irure sit et sit quis. In sit fugiat consectetur non consectetur aliquip. Consequat elit reprehenderit proident nostrud amet tempor enim laboris. Eu veniam deserunt in nisi sint tempor nisi Lorem labore officia. Anim elit ad proident laborum ullamco sit ullamco elit do sunt dolor ipsum nulla laborum. Amet sit quis proident ad. Aliqua deserunt esse cillum officia laboris minim reprehenderit adipisicing. Ea mollit laborum ex incididunt qui reprehenderit. Eiusmod incididunt consectetur pariatur aliquip id dolor mollit est adipisicing nisi. Ea minim irure ut sint cupidatat sit nostrud eiusmod esse dolore labore ullamco elit. Aliqua sunt magna cillum in elit Lorem voluptate laboris et nulla veniam consectetur dolore aliqua. Consectetur laborum ullamco cillum ut voluptate. Nulla consequat magna cillum irure. Enim reprehenderit ea aliqua nostrud ullamco labore esse excepteur duis aliqua aliqua adipisicing culpa irure velit. Sint amet sunt eu velit et officia veniam reprehenderit sint dolore laborum aliquip officia esse elit. Commodo minim amet reprehenderit do laborum aute est elit tempor officia commodo exercitation duis nisi exercitation. Est quis eiusmod non aliquip consequat consequat elit eiusmod incididunt excepteur ullamco eu occaecat. Dolor dolore veniam eu voluptate duis nulla Lorem commodo amet non quis ipsum cillum laboris ex. Labore consequat sunt ex dolore. Magna ad tempor pariatur duis. Do ullamco enim amet ipsum consectetur. Esse ullamco cillum eiusmod Lorem labore laborum ex elit excepteur elit Lorem. Velit nulla aute eiusmod do. Mollit sit minim nostrud labore ad consectetur velit proident pariatur velit amet reprehenderit mollit eiusmod. Minim voluptate officia veniam fugiat nisi veniam est consequat. Excepteur ipsum in ex ullamco aute et dolore dolor aliquip. Deserunt voluptate labore minim. Enim pariatur id ipsum eiusmod eu tempor cupidatat eiusmod ullamco. Incididunt pariatur laborum consectetur velit laborum occaecat tempor sint consequat ut. Consequat anim adipisicing aute quis pariatur laborum adipisicing sunt dolore magna ad minim exercitation fugiat. Qui occaecat ad dolor aliquip est tempor. Mollit culpa cillum nulla eiusmod occaecat cupidatat ex excepteur labore minim et. Aliqua ex officia enim eu veniam occaecat adipisicing est cupidatat ea. Dolore proident aliquip sunt cillum enim nulla culpa anim commodo dolore proident laboris. Est eiusmod eiusmod commodo consequat nostrud Lorem ex est nisi ex occaecat anim. Et velit eiusmod officia nisi laboris ex eu nisi enim.',
        })}
      >
        点击按钮
      </Button>
    </DemoBlock>

    <DemoBlock title="等待 confirm 完成, 获取点击结果">
      <Button
        block
        pattern="primary"
        fill="outline"
        onClick={async () => {
          const result = await Dialog.confirm({
            content: '点击蒙层也可取消',
            closeOnMaskClick: true,
          })
          if (result) {
            Toast.show({ content: '点击了确认', position: 'bottom' })
          } else {
            Toast.show({ content: '点击了取消', position: 'bottom' })
          }
        }}
      >
        点击按钮
      </Button>
    </DemoBlock>
  </>
)
